<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>消费记录</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        h2 {
            text-align: center;
            margin-bottom: 30px;
        }

        .consumption-box {
            width: 900px;
            margin: 50px auto;
        }

        .consumption-box table {
            width: 100%;
            text-align: center;
            color: #666;
        }

        .consumption-box table tr {
            height: 40px;
            line-height: 40px;
        }

        .consumption-box table tbody tr:nth-child(even) {
            background: #fafafa;
        }

        .consumption-box table thead tr th {
            border: 1px solid #eaeaea;
            border-left: none;
        }

        .consumption-box table thead tr th:last-child {
            border-right: none;
        }

        .consumption-box table tr td:last-child {
            color: #999;
            width: 100px;
        }

        .consumption-box table tr td {
            border-left: 1px solid #eaeaea;
        }

        .consumption-box table tr td:first-child {
            border-left: none;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="consumption-box">
        <h2>消费记录</h2>
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>内 容</th>
                <th>消费金额（Y元）</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(record,i) in recordList">
                <td v-text="record.description">升级VIP</td>
                <td v-text="record.amount">-888.0</td>
                <td v-text="record.formatDate">2021-12-04 16:37:52</td>
                <td>--</td>
            </tr>
            </tbody>

        </table>


        <el-button type="primary" icon="el-icon-search" @click="toMember">充值会员</el-button>
        <el-button type="primary" icon="el-icon-search" @click="toUser">查询用户信息</el-button>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return{
                recordList: []
            }
        },
        beforeCreate() {
            axios.get('/api/record/getRecordList', {
                params: {
                    userId: 1
                }
            })
                .then(response => {
                    this.recordList = response.data.data;
                })
                .catch(error => {
                    console.log(error);
                });
        },
        methods:{
            toMember() {
                window.location.href='http://127.0.0.1:8080/api/member/index';
            },
            toUser() {
                window.location.href='http://127.0.0.1:8080/api/user/index';
            }
        }
    })
</script>
</body>
</html>
